<template>
<div class="header">
  <!--左边 -->
  <div class="left">
    <img src="../assets/qiyao.png" alt />
    <div class="title">七一一研究所</div>
    <div class="center">
      <a-menu v-model="current" mode="horizontal" theme="light" @click="change">
        <template v-for="item in routers">
          <a-menu-item v-if="!item.children" :key="item.path">
            <a-icon :type="item.meta.iocn" :style="{ fontSize: '25px'}" />
            <span style="fontSize:18px">{{item.name}}</span>
          </a-menu-item>
          <a-sub-menu v-else :key="item.path">
            <span slot="title" class="submenu-title-wrapper">
              <a-icon :type="item.meta.iocn" :style="{ fontSize: '25px'}" />
              <span style="fontSize:18px">{{item.name}}</span>
            </span>
            <a-menu-item v-for="items in item.children" :key="items.path">
              <a-icon :type="items.meta.iocn" :style="{ fontSize: '15px'}" />
              <span style="fontSize:14px">{{items.name}}</span>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </div>
  </div>
  <!--左边 -->

  <!--右边 -->
  <div class="right">
    <a-icon type="fullscreen" :style="{ fontSize: '20px', }" @click="handleFullScreen" />

    <a-popover title="用户中心" placement="bottom">
      <template slot="content">
        <p>
          <a @click="userChange">切换用户</a>
        </p>

        <p>
          <a>个人中心</a>
        </p>
      </template>
      <a-icon type="team" :style="{ fontSize: '30px', }" />
    </a-popover>
  </div>
</div>
</template>

<script>
// import { mapActions } from "vuex";
export default {
  data() {
    return {
      current: ["mail"],
      routers: [],
      fullscreen: false,
    };
  },
  created() {
    let routers = JSON.parse(localStorage.getItem("router"));
    this.routers = routers;
  },
  methods: {
    change({
      key
    }) {
      console.log(key);
      this.$router.push(key).catch(() => {});
    },
    userChange() {
      this.$router.push("/login").catch(() => {});
    },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  height: 60px;
  box-shadow: 0px 3px 3px #ccc;

  .title {
    min-width: 200px;
    font-size: 24px;
  }
}

.left {
  display: flex;
  align-items: center;

  img {
    height: 40px;
    margin: 0 30px;
  }

  width: 90%;
}

.right {
  width: 10%;
  justify-content: space-between;
  align-items: center;
  padding-right: 30px;
  display: flex;
}
</style>
